<template>
    <div class="main">
        <a-row class="top-title">
            <a-col :span="3" class="bold-black"><h3><span>专业名称：</span></h3></a-col>
            <a-col :span="5"><h3>{{major}}</h3></a-col>
            <a-col :span="3" class="bold-black"><h3><span>科室名称：</span></h3></a-col>
            <a-col :span="5"><h3>{{dept_id}}</h3></a-col>
        </a-row>
        <a-row class="search"> 
            <a-col :span="3" class="bold-black"><h3><span>机构名称：</span></h3></a-col>
            <a-col :span="5">
                <a-tree-select
                    v-model:value="value"
                    show-search
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    allow-clear
                    tree-default-expand-all
                    :tree-data="powerTreeData"
                />
            </a-col>
            <a-col :span="3">
                <button class="btn-color-search" @click="handleSearch(value)">查询</button>
            </a-col>    
        </a-row>
            <a-row>
                <a-col :span="6">
                    <button class="btn-color" @click="handleSetQuota">设置定额</button>
                </a-col>   
            </a-row>
        </div>
        <div class="content-bottom">
            <a-table :dataSource="dataSource" :columns="columns" :bordered="true" :pagination="{pageSize:10}" class="table-content">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'operate'">
                        <button class="style" @click="handleEdit(record)">定额修改</button>
                        <a-popconfirm 
                            title="你真的要删除吗？" 
                            ok-text="确定" 
                            cancel-text="取消" 
                            @confirm="handleDelete(record)"
                            @cancel="cancel"
                            >
                            <button type="primary" danger class="style">删除</button>
                        </a-popconfirm>
                        <button type="primary" danger class="style" @click="handleHistoryRecord(record)">历史记录</button>    
                    </template>
                </template> 
            </a-table>
        </div>
    <setQuota2 ref="setModalRef" @load-data="loadData" :powerTreeData="powerTreeData"></setQuota2>
    <editQuota ref="editModalRef" :editValue="editValue" @load-data="loadData" :modifyId="modifyId"></editQuota>
    <historyRecord ref="historyRecordRef" :historyList="historyList"></historyRecord>
  </template>
<script setup>
 import { PauseCircleFilled,CaretDownOutlined} from '@ant-design/icons-vue';
import { ref,onMounted, watchEffect } from 'vue';
import {GdQuotaApi} from '@/api/insulated-data/quota-process-data.js'
import setQuota from '@/views/team2/powerModule/quotaProcess/setQuota.vue'
import setQuota2 from '@/views/team2/powerModule/quotaProcess/setQuota2.vue'
import editQuota from './editQuota.vue';
import historyRecord from '@/views/team2/powerModule/quotaProcess/historyRecord.vue' 
import request from '@/utils/request';
const value1=ref()
const value = ref('');
const powerModule1=ref([])
const powerTreeData = ref([]);

const major=ref('供电专业')
const dept_id=ref('供电技术科')

const setModalRef=ref(null)
const editModalRef=ref(null)
const historyRecordRef=ref(null)
const editValue=ref()

const dataSource=ref([])
const setQuotaSource=ref([])

const teamValue=ref([])
const modifyId=ref()

const historyList=ref([])

const columns=ref( [
    {
        title: '车间名称',
        dataIndex: 'workshopName',
        key: 'workshopName',
        align:'center'
    },
    {
        title: '班组名称',
        dataIndex: 'teamName',
        key: 'teamName',
        align:'center'
    },
    {
        title: '绝缘工具',
        dataIndex: 'name',
        key: 'name',
        align:'center'
    },
    {
        title: '定额数量',
        dataIndex: 'count',
        key: 'count',
        align:'center'
    },
    {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
        align:'center'
    },
    {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        align:'center'
    },
])

    // const searchValue=ref([])
    const loadData=async()=>{
        const result = await request.get(`/api/quota/allQuotoList`)
        // console.log(result)
        dataSource.value=result.data.data
        console.log(dataSource.value)
   }
   onMounted(async () => {
    loadData()
    const result = await request.get(`/sys/getSubOrg`)
    teamValue.value=result.data.data

    const result2 = await request({
        url:'/sys/orgTree',
        method:'get',
        params:{
        speciality:1
        }
    })
powerTreeData.value=result2.data.data[0].children[0].children
   });

   //设置定额
   const handleSetQuota=async()=>{
    setModalRef.value.showModal()
    const result=await request.get(`/api/quota/optionalTools`)
    console.log(result.data.data)
   }

   //删除
   const handleDelete=async(record)=>{
    request({
        url:'/api/quota/del',
        method:'post',
        data:{
            id:record.id.toString()
        }
    })
    // console.log(record.id)
    loadData()
   }

   const cancel=e=>{}

   //定额修改
   const handleEdit=(record)=>{
    console.log(record)
    editValue.value=record
    for(var i=0;i < teamValue.value.length;i++){
        if(record.teamName===teamValue.value[i].orgName){
            modifyId.value=teamValue.value[i].orgId
        }
    }
    editModalRef.value.showModal()
   }

   //查询
   const handleSearch=async(value)=>{
    const result = await request({
        url:'/api/quota/workshopOrTeamQuotoList',
        method:'get',
        params:{
            orgId:value
        }
    })
    // console.log(result)
    // loadData()
    dataSource.value=result.data.data
    setQuotaSource.value=result.data.data
   }

   watchEffect(()=>{
    if(value.value===undefined){
        loadData()
    }
   })
   //历史记录按钮
   const handleHistoryRecord= async(record)=>{
    // console.log(record)
    const id=record.id
    const result = await request({
        url:'/api/quota/selQuotaLog',
        method:'get',
        params:{
            quotaId:id.toString()
        }
    })
    console.log(result)
    historyList.value=result.data.data
    // console.log(historyList.value)
    historyRecordRef.value.showModal()

   }
</script>
<style lang="less" scoped>

// .content{
//     /* display: flex; */
//     width: 100%;
//     font-size: 20px;
//     background-color: white;
// }

// .content .content-top{
//     /* float: left; */
//     /* margin: 10px; */
//     margin-left: 50px;
    
// }
// .content .content-top{
//     width: 100%;
// }
// .content .content-top .btn-color{
//     background-color: #169bd5;
//     border: 1px solid #ccc;
//     border-radius: 6px;
//     font-size: 15px;
//     color: white;
//     height: 30px;
//     width: 80px;
// }

// .content .content-bottom{
//     margin-left: 50px;
//     width: 1100px;
// }
// .content .bold-black{
//     font-weight: bold;
// }
// .content .content-bottom .table-content{
//     /* background-color: white; */
//     align-content: center;
// }
// .content-bottom .style{
//     background-color: #169bd5;
//     border: 1px solid #ccc;
//     border-radius: 6px;
//     font-size: 15px;
//     color: white;
//     margin-right: 10px;
// }
.main{
    padding: 20px 0 0 20px;
}
.search{
    padding: 20px 0 20px 0;  
} 
h3{
    display: inline-block;
}
span{
    font-weight: 700;
}
.btn-color-search{
    margin-left: 30px;
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    height: 30px;
    width: 80px;
}
.btn-color{
    margin-bottom: 20px;
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    height: 30px;
    width: 80px;
}
.style{
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    margin-right: 10px;
}
.table-content{
    padding: 20px 20px 0 20px;
}
</style>